<template>
  <el-main>
    <!-- 查询条件 -->
    <!-- <div style="overflow: hidden; ">
      <div style="float: left;">
        <el-form
          :model="searchModel"
          ref="searchForm"
          label-width="80px"
          :inline="true"
          size="small"
        >
          <el-form-item>
          <el-input v-model="searchModel.bbmc" placeholder="请输入报表名称" />
          </el-form-item>
          <el-form-item>
          <el-button
              type="primary"
              icon="el-icon-search"
              @click="search(pageNo, pageSize)"
              >查询</el-button
          >
          <el-button icon="el-icon-refresh-right" @click="resetValue()"
              >重置</el-button
          >
          
          </el-form-item>
        </el-form>
      </div>
    </div> -->
    <!-- 数据表格 -->
    <el-table
      :data="dtbbList"
      :height="tableHeight"
      border
      stripe
      style="width: 100%; margin-bottom: 10px"
      row-key="id"
      :tree-props="{children: 'children'}"
    >
      <!-- <el-table-column prop="fwdm" label="服务代码" align="center"></el-table-column> -->
      <!-- <el-table-column prop="fwlx" label="服务类型" align="center"></el-table-column> -->
      <el-table-column prop="fwmc" label="服务名称"></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            icon="el-icon-edit"
            type="primary"
            size="small"
            @click="handleEdit(scope.row)"
            >编辑
          </el-button>   

          <el-button
            icon="el-icon-delete"
            type="danger"
            size="small"
            @click="handleDelete(scope.row)"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页工具栏 -->
    <!-- <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNo"
      :page-sizes="[10, 20, 30, 40, 50]"
      :page-size="10"
      layout="->,total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination> -->
    <!-- 添加和修改角色窗口 -->
    <system-dialog
      :title="bbmbDialog.title"
      :visible="bbmbDialog.visible"
      :width="bbmbDialog.width"
      :height="bbmbDialog.height"
      @onClose="onClose"
      @onConfirm="onConfirm"
      >
      <div slot="content">
          <el-form
          :model="bbmb"
          ref="bbmbForm"
          :rules="rules"
          label-width="80px"
          :inline="false"
          size="small"
          >
          <el-form-item label="报表代码" prop="bbdm">
              <el-input v-model="bbmb.bbdm"></el-input>
          </el-form-item>
          <el-form-item label="报表类型" prop="bblx">
              <el-input v-model="bbmb.bblx"></el-input>
          </el-form-item>
          <el-form-item label="报表名称" prop="bbmc">
              <el-input v-model="bbmb.bbmc"></el-input>
          </el-form-item>
          </el-form>
      </div>
    </system-dialog>

  </el-main>
</template>

<script>
import axios from "axios";
import XLSX from 'xlsx';
import dtbbApi from '@/api/dtbb/bbmb';
import sjzdApi from '@/api/dtbb/sjzd';
import sjfwApi from '@/api/dtbb/sjfw';
import infoApi from '@/api/dtbb/info';
import { getToken } from "@/utils/auth";
import SystemDialog from "@/components/system/SystemDialog.vue";

// 导入末级节点脚本
import leafUtils from "@/utils/leaf";

export default {
  name: "dtbbList",
  components: { SystemDialog },
  data() {
    return {
      //查询条件
      searchModel: {
        bbmc: "",
        pageNo: 1,
        pageSize: 10,
      },
      dtbbList: [], //数据列表
      tableHeight: 0, //表格高度
      pageNo: 1, //当前页码
      pageSize: 10, //每页显示数量
      total: 0, //总数量
      rules: {
        bbdm: [
          { required: true, trigger: "blur", message: "请输入报表代码" },
        ],
        bblx: [
          { required: true, trigger: "blur", message: "请输入报表类型" },
        ],
        bbmc: [
          { required: true, trigger: "blur", message: "请输入报表名称" },
        ],
      },
      current:'',//当前行
      //添加和修改角色窗口属性
      bbmbDialog: { title: "", visible: false, height: 230, width: 500 },
      //角色对象
      bbmb: {
        id: "",
        bbdm: "",
        bblx: "",
        bbmc: "",
      },
      //分配权限窗口属性
      dialogVisible: false,
      bbform:{
          id:'',
          zd:'',
      },
      //下拉框列表数据
      bbList: [],
      zdList: [],
      sjzdList: [],
      //选择字段的对象list
      afterList:[],
      //tia
      infodata:'',
      //
      infoForm:{
          bbid:'',
          cj:'',
          pid:'',
          szgs:'1',
          lxh:'',
          lmc:'',
      },
      //预览
      previewFile:false,
      workbook:'',
      cardActive:'',
      tableau:'',
    };
  },
  methods: {
    /*** 查询 */
    async search() {
      //发送查询请求
      let res = await sjfwApi.getTreeList();
      //执行成功
      if (res.success) {
        console.log(res.data);
        //报表列表
        this.dtbbList = res.data;
        //总数量
        // this.total = res.data.total;
      }
    },
    /*** 重置查询条件 */
    resetValue() {
      //清空查询条件
      this.searchModel.bbmc = "";
      //重新查询
      this.search();
    },
    /*** 打开添加窗口 */
    openAddWindow() {
      this.$resetForm("bbmbForm", this.bbmb); //清空表单数据
      this.bbmbDialog.title = "新增报表模板"; //设置窗口标题
      this.bbmbDialog.visible = true; //显示窗口
    },
    /**窗口取消 */
    onClose() {
      this.bbmbDialog.visible = false;
    },
    /**窗口确认 */
    onConfirm() {
      //表单验证
      this.$refs.bbmbForm.validate(async (valid) => {
        if (valid) {
          let res = null;
          //判断角色ID是否为空
          if (this.bbmb.id === "") {
            //新增 //发送添加请求
            res = await dtbbApi.add(this.bbmb);
            console.log("新增请求", res);
          } else {
            console.log(this.bbmb);
            //发送修改请求
            res = await dtbbApi.update(this.bbmb);
            console.log(res);
          }
          //判断是否成功
          if (res.success) {
            this.$message.success(res.message); //刷新
            this.search(this.pageNo, this.pageSize); //关闭窗口
            this.bbmbDialog.visible = false;
          } else {
            this.$message.error(res.message);
          }
        }
      });
    },
    /*** 打开编辑窗口 */
    handleEdit(row) {
      //数据回显
      // this.$objCopy(row, this.bbmb); //将当前编辑的数据复制到role对象中 //设置窗口标题
      console.log(row)
    //   // router.push('dtbb/mbxjbb')
      this.$router.push({
	      path:'/dtbb/test',  // path切换
        query:{fwid:row.id,fwmc:row.fwmc,fwlx:row.pid}
	  });

    // { path: '/dtbb/test', query: { id: 1 } } 参数
    // let routeData = this.$router.resolve({ path: '/dtbb/test' });
    // window.open(routeData.href, '_blank');


    },
    /*** 删除 */
    async handleDelete(row) {
        //确认是否删除
        let confirm = await this.$myconfirm("确定要删除该数据吗?");
        if (confirm) {
          //发送删除请求
          let res = await sjfwApi.delete({ id: row.id });
          //判断是否成功
          if (res.success) {
            //成功提示
            this.$message.success(res.message);
            //刷新
            this.search(this.pageNo, this.pageSize);
          } else {
            //失败提示
            this.$message.error(res.message);
          }
        }
    },

    /*** 当每页数量发生变化时触发该事件 */
    handleSizeChange(size) {
      this.pageSize = size;
      //将每页显示的数量交给成员变量
      this.search(this.pageNo, size);
    },
    /*** 当页码发生变化时触发该事件 */
    handleCurrentChange(page) {
      this.pageNo = page;
      //调用查询方法
      this.search(page, this.pageSize);
    },

  },
  //初始化时调用
  created() {
    this.search();
  },
  //挂载后调用
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 220;
    });
  },
};
</script>

<style lang="scss" scoped>

.tablestyle{
    display: flex;
    justify-content: center;
    align-items: center;
}

.abow_dialog {
  display: flex;
  justify-content: center;
  align-items: Center;
  overflow: hidden;
  .el-dialog {
      margin: 0 auto !important;
      height: 90%;
      overflow: hidden;
      .el-dialog__body {
          position: absolute;
          left: 0;
          top: 54px;
          bottom: 0;
          right: 0;
          padding: 0;
          z-index: 1;
          overflow: hidden;
          overflow-y: auto;
      }
  }
}
</style>
